<template>
  <view class="content">
    <!-- 标题搜索 -->
    <u-sticky>
      <view class="usersearch">
        <u-search
          placeholder="根据标题查询商品"
          v-model="title"
          input-align="center"
          clearabled="true"
          animation="true"
          @custom="usersearchclick(title)"
          @clear="handleClear()"
          @change="handleChange(title)"
        ></u-search>
      </view>
      <!-- 分类搜索 -->
      <view class="usersearch d-flex">
        <!-- <text>商品分类</text> -->
        <u-select
          @confirm="confirm"
          mode="single-column"
          v-model="show"
          :list="categoryList"
        ></u-select>
        <van-button v-model="show" type="default" @click="selectCategory"
          ><span>请选择商品分类:</span
          ><span style="font-weight: 600">{{ name }}</span>
        </van-button>
        <van-button round type="info" @click="handleSearch">搜索</van-button>
      </view>
    </u-sticky>

    <!-- 商品分类 -->
    <!-- <scroll-view scroll-x="true" style="background: #fff">
      <view class="classification_list">
        <view
          class="classification_item"
          v-for="(item, index) in categorylist"
          :key="index"
          @click="handleClick(index, item)"
          :class="[isActive == index ? 'category-item-active' : '']"
        >
          {{ item.name }}
        </view>
      </view>
    </scroll-view> -->
    <!-- 商品列表 -->
    <view>
      <view class="warehousing_list" v-if="goodslist.length > 0">
        <view
          class="warehousing_item"
          v-for="(item, index) in goodslist"
          :key="index"
        >
          <view class="warehousing_itemtop">
            <!-- id名 -->
            <text class="text-weight">分类名:{{ item.category.name }}</text>
            <view class="">
              <u-icon
                name="edit-pen"
                color="#9e9d9d"
                @click="handleEdit(item.id)"
              ></u-icon>
            </view>
          </view>
          <view class="warehousing_itemcontent">
            <view class="warehousing_content">
              <text class="text-weight">标题:</text
              ><text>{{ item.title }}</text>
            </view>
            <view class="warehousing_content">
              <text class="text-weight">货号:</text
              ><text>{{ item.art_no }}</text>
            </view>
            <view class="warehousing_content">
              <text class="text-weight">成本价:</text
              ><text>¥{{ item.const_price }}</text>
            </view>
            <view class="warehousing_content">
              <text class="text-weight">售价:</text>
              <text>¥{{ item.price }}</text>
            </view>
            <!-- 新增会员价 -->
            <view class="warehousing_content">
              <text class="text-weight">会员价:</text>
              <text style="color: red">¥{{ item.vip_price }}</text>
            </view>
            <view class="warehousing_content">
              <text class="text-weight">商品单位:</text
              ><text>{{ item.goods_unit }}</text>
            </view>
            <view class="warehousing_content">
              <text class="text-weight">商品类别:</text>
              <!-- <text v-if=""></text> -->
              <text>{{ item.color_text }}</text>
            </view>

            <view style="text-align: right; margin-top: 20rpx">
              <van-button
                style="margin-right: 10rpx"
                color="#2C3E50"
                @click="handleDetail(item.id)"
                round
                type="info"
                >商品详情</van-button
              >
              <van-button
                color="#F39C12"
                @click="handleSku(item.id)"
                round
                type="info"
                >商品参数</van-button
              >
            </view>
          </view>
        </view>
      </view>
      <view v-else
        ><u-empty style="text-align: center" text="暂无商品数据"></u-empty
      ></view>
      <!-- 加载中 -->
      <text class="loading-text">
        {{
          loadingType === 0
            ? contentText.contentdown
            : loadingType === 1
            ? contentText.contentrefresh
            : contentText.contentnomore
        }}
      </text>
    </view>
    <!-- 添加商品 -->
    <view class="goodsadd" @click="goodsaddclick()"> 新增 </view>
  </view>
</template>

<script>
import uSticky from "../../uview-ui/components/u-sticky/u-sticky.vue";
var pageIndex = 1;

export default {
  components: { uSticky },
  data() {
    return {
      list: [
        // {
        //   value: "1",
        //   label: "江",
        // },
        // {
        //   value: "2",
        //   label: "湖",
        // },
      ],

      show: false,
      //   选中的name值
      name: "",
      //   选中的id
      id: "",
      category: "",

      // 分类列表
      categoryList: [],

      // 标题
      title: "",
      // 分类列表当前项
      isActive: "",
      // 分类列表
      //   商品列表
      goodslist: [],
      loadingType: 0,
      contentText: {
        contentdown: "上拉显示更多",
        contentrefresh: "正在加载...",
        contentnomore: "没有更多数据了",
      },
      //   当前页码
      currentpage: 0,
      // 总页数
      total: 0,
      //   一页10条
      num: 0,
      //   最后一页
      lastpage: 0,
    };
  },
  methods: {
    //
    selectCategory() {
      this.show = true;
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.goods/categoryList", //仅为示例，并非真实接口地址。
        data: {},
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          if (res.data.code == 1) {
            // console.log(res.data.data);
            var list = [];
            for (var i in res.data.data) {
              var obj = {};
              obj.value = res.data.data[i].id;
              obj.label = res.data.data[i].name;
              list.push(obj);
            }
            this.categoryList = list;
            console.log(this.categoryList);
            this.categoryList.unshift({ label: "请选择", value: "" });
          }
        },
      });
    },
    confirm(e) {
      console.log(e);
      e.map((item) => {
        console.log(item);
        this.name = item.label;
        this.id = item.value;
      });
    },
    handleSku(id) {
      uni.navigateTo({
        url: "../specifications_edit/specifications_edit?id=" + id,
      });
    },
    // 点击清除事件
    handleClear() {
      console.log("清空");
      this.getGoodsList();
    },
    // 输入框改变事件
    handleChange() {
      this.getGoodsList();
      console.log(this.goodslist);
      if (this.goodslist.length !== this.total) {
        this.getMoreGoodsList();
      }
    },
    //根据标题搜索商品
    usersearchclick() {
      //   console.log(title);
      this.getGoodsList();
      console.log(this.goodslist);
      if (this.goodslist.length !== this.total) {
        this.getMoreGoodsList();
      }
    },
    // 根据商品分类搜索
    handleSearch() {
      this.getGoodsList();
      console.log(this.goodslist);
      if (this.goodslist.length !== this.total) {
        this.getMoreGoodsList();
      }
    },
    // 查看商品列表(原有)
    getGoodsList() {
      const that = this;
      pageIndex = 1;
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.goods/goodslist", //仅为示例，并非真实接口地址。
        data: {
          page: pageIndex,
          searchtitle: that.title,
          cate: that.id,
        },
        method: "POST",
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          console.log(res.data.data);
          that.goodslist = res.data.data.data;
          uni.hideNavigationBarLoading();
          uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
        },
      });
    },
    // 查看待清洗列表(加载更多)
    getMoreGoodsList() {
      // 加载更多列表
      const that = this;

      pageIndex++;
      if (that.loadingType != 0) {
        return false; //loadingType!=0;直接返回
      }
      that.loadingType = 1;
      uni.showNavigationBarLoading();
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.goods/goodslist",
        method: "POST",
        data: {
          page: pageIndex,
          searchtitle: that.title,
          cate: that.id,
        },
        header: {
          token: uni.getStorageSync("token"),
        },
        success(res) {
          console.log(res.data.data);
          if (that.goodslist.length == res.data.data.total) {
            that.loadingType = 2;
            uni.hideNavigationBarLoading(); //关闭加载动画
            return false;
          }

          that.goodslist = that.goodslist.concat(res.data.data.data);

          that.loadingType = 0; //将loadingType归0重置
          uni.hideNavigationBarLoading(); //关闭加载动画
        },
      });
    },
    // //   点击分类列表
    // handleClick(index, item) {
    //   const that = this;
    //   that.isActive = index;
    //   console.log(index);
    //   //   that.categoryid = item.id;
    //   //   取分类id
    //   pageIndex = 1;
    //   uni.request({
    //     url: "http://gxyckf.1qit.com/api/admin.goods/goodslist", //仅为示例，并非真实接口地址。
    //     data: {
    //       page: pageIndex,
    //       //   分类id
    //       //   cate: item.id,
    //     },
    //     method: "POST",
    //     header: {
    //       token: uni.getStorageSync("token"),
    //     },
    //     success: (res) => {
    //       console.log(res.data.data);
    //       // 给每一项加一个属性
    //       console.log(res.data.data.total);
    //       that.total = res.data.data.total;

    //       that.goodslist = res.data.data.data;

    //       uni.hideNavigationBarLoading();
    //       uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
    //     },
    //   });
    // },

    // 商品详情
    handleDetail(id) {
      uni.navigateTo({
        url: "../goodsdetail/goodsDetail?id=" + id,
      });
    },

    // 修改商品
    handleEdit(id) {
      uni.navigateTo({
        url: "../goodsedit/goodsedit?id=" + id,
      });
    },
    // 添加商品
    goodsaddclick() {
      uni.navigateTo({
        url: "../goodsadd/goodsadd",
      });
    },
  },
  mounted() {
    this.getGoodsList();
    uni.request({
      url: "http://gxyckf.1qit.com/api/admin.goods/categoryList", //仅为示例，并非真实接口地址。
      data: {},
      header: {
        token: uni.getStorageSync("token"),
      },
      success: (res) => {
        if (res.data.code == 1) {
          console.log(res.data.data);
          var list = [];
          for (var i in res.data.data) {
            var obj = {};
            obj.value = res.data.data[i].id;
            obj.label = res.data.data[i].name;
            list.push(obj);
          }
          this.categoryList = list;
          console.log(this.categoryList);
          this.categoryList.unshift({ label: "请选择", value: "" });
        }
      },
    });
  },
  onLoad() {
    // 原有列表
    // this.getGoodsList();
  },
  /*下拉刷新*/
  onPullDownRefresh() {
    this.getGoodsList();
  },
  onReachBottom() {
    this.getMoreGoodsList();
  },
};
</script>

<style>
page {
  background: #f6f6f6;
}
.usersearch {
  width: 90%;
  padding: 2% 5%;
  background: #fff;
}
.d-flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.classification_list {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.classification_item {
  margin: 0 20rpx;
  padding: 20rpx;
  text-align: center;
}
/* 分类列表当前项 */
.category-item-active {
  color: #2979ff;
  border-bottom: 1px solid #2979ff;
}
.warehousing_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.warehousing_list {
  width: 90%;
  margin: 0 5%;
}
.warehousing_item {
  background: #fff;
  margin: 20rpx 0;
  border-radius: 10rpx;
  box-shadow: 2rpx 2rpx 10rpx #eee;
  padding: 20rpx;
}
.warehousing_itemtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.text-weight {
  font-weight: 600;
}

.warehousing_itemtop image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 20rpx;
}
.warehousing_edit {
  width: 450rpx;
}
.warehousing_edit view:nth-child(1) {
  color: #424242;
}
.goodsspecifications {
  font-size: 28rpx;
  color: #a9a9a9;
  margin: 2% 0;
}
.goodsspecifications text {
  margin-right: 2%;
}
.goodsadd {
  position: fixed;
  bottom: 20rpx;
  right: 20rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 100rpx;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}
.goodstop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.goodstopname {
  width: 400rpx;
}
.goodstopoperation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90rpx;
}
.warehousing_edit {
  width: 150rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.loading-text {
  height: 80upx;
  line-height: 80upx;
  font-size: 25upx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.indexedititem {
  padding: 5% 0;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.indexedititem text {
  width: 160rpx;
  color: #313131;
}
</style>
